<script setup>
import { ref } from 'vue'
import { showConfirmDialog } from 'vant'
import { showToast } from 'vant'
import { getAllCommentsService, addCommentService } from '@/api/comments'
import { cleanWriteWordsService } from '@/api/words'
// 拿到用户仓库
import { useUserStore } from '@/stores'
import { computed } from 'vue'
import { useWordsStore } from '@/stores'
import { onBeforeMount } from 'vue'

const userStore = useUserStore()
const wordsStore = useWordsStore()

const defaultList = ref([])
const list = ref([])
// 进入页面， 获取所有的留言列表
onBeforeMount(async () => {
  const {
    data: { data }
  } = await getAllCommentsService()
  defaultList.value = data
  list.value = [...defaultList.value]
})

const isLogin = computed(() => {
  if (
    userStore.user === undefined ||
    userStore.user === '' ||
    JSON.stringify(userStore.user) === '{}'
  ) {
    return false
  } else {
    return true
  }
})

const logout = () => {
  showConfirmDialog({
    title: '退出登录',
    message: '你确定要退出吗？'
  })
    .then(() => {
      // 退出方法 清空用户仓库,还有单词仓库
      userStore.removeUser()
      wordsStore.removeWords()
      showToast({
        message: '退出成功',
        position: 'bottom'
      })
    })
    .catch(() => {})
}

setInterval(() => {
  list.value = [...defaultList.value]
}, 10000)

const commentsShow = ref(false)
const cleanShow = ref(false)
//留言信息
const comment = ref('')

// 提交留言的方法
const submitComments = async () => {
  // 校验以下留言是不是空的
  if (comment.value.trim() === '') {
    showToast({
      message: '留言不能为空',
      position: 'bottom'
    })
    return
  }
  // 留言不是空的，往服务器追加
  await addCommentService({
    text: comment.value,
    userId: userStore.user.id
  })
  showToast({
    message: '感谢您的留言~~~',
    position: 'bottom'
  })
  // 重新获取留言
  const {
    data: { data }
  } = await getAllCommentsService()
  defaultList.value = data
}

// 清空已背单词的方法
const code = ref('')
const cleanSubmit = async () => {
  // 校验密码是否输入了
  if (code.value.trim() === '') {
    showToast({
      message: '请输入密码',
      position: 'bottom'
    })
    return
  }
  // 输入了，调用接口
  const { data } = await cleanWriteWordsService(userStore.user.id, code.value)
  if (data.code === 1) {
    //清空成功了
    showToast({
      message: '清空成功',
      position: 'bottom'
    })
  }
}
</script>
<template>
  <!-- 头像部分 -->
  <div>
    <div class="user">
      <van-image
        round
        width="50"
        height="50"
        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
      />
      <p>{{ userStore.user.name }}</p>
      <div class="btn">
        <van-button
          v-if="isLogin"
          plain
          type="primary"
          size="small"
          @click="logout"
          >退出登录</van-button
        >
        <van-button
          v-else
          plain
          type="primary"
          size="small"
          @click="$router.push('/login')"
          >立即登录</van-button
        >
      </div>
    </div>
  </div>
  <!-- 弹幕部分 -->
  <div class="dm">
    <van-barrage
      rows="5"
      duration="7000"
      ref="barrage"
      v-model="list"
      :auto-play="true"
    >
      <div class="video" style="width: 100%; height: 150px"></div>
    </van-barrage>
  </div>
  <!-- 按钮部分 -->
  <div v-if="isLogin" class="btn-down">
    <van-button
      @click="commentsShow = true"
      block
      icon="plus"
      size="small"
      type="primary"
    >
      <van-swipe
        vertical
        class="notice-swipe"
        :autoplay="2000"
        :touchable="false"
        :show-indicators="false"
      >
        <van-swipe-item>我要留言</van-swipe-item>
        <van-swipe-item>抽大奖</van-swipe-item>
      </van-swipe>
    </van-button>
    <van-button @click="cleanShow = true" bloc size="small" type="danger"
      >清空所有已背</van-button
    >

    <van-button
      @click="$router.push('/sayword')"
      bloc
      size="small"
      type="success"
      >查看已背单词</van-button
    >
  </div>

  <!-- 留言部分 -->
  <van-dialog
    @confirm="submitComments"
    v-model:show="commentsShow"
    title="留言"
    show-cancel-button
  >
    <van-field
      v-model="comment"
      required
      label="留言"
      placeholder="留下你想说的话吧！"
    />
  </van-dialog>

  <!-- 清空所有已背单词部分 -->
  <van-dialog
    @confirm="cleanSubmit"
    v-model:show="cleanShow"
    title="清空已背单词"
    show-cancel-button
  >
    <van-field
      v-model="code"
      required
      label="授权码"
      placeholder="输入授权码"
    />
  </van-dialog>
</template>
<style lang="less" scoped>
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
.btn-down {
  display: flex;
  flex-direction: column;
  button {
    align-self: center;
    width: 80%;
    margin: 10px 0;
  }
}
.dm {
  background-color: #c6c2c2;
}

.user {
  display: flex;
  margin: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #999595;

  p {
    margin: 0;
    padding: 0;
    align-self: center;
    margin-left: 10px;
    flex: 1;
    font-size: 20px;
    font-weight: 550;
  }

  .btn {
    align-self: center;
  }
}
</style>
